﻿<%@ Page Language="C#" MasterPageFile="~/Examples/Examples.master" AutoEventWireup="true" CodeBehind="Css_Selection.aspx.cs" Inherits="SampleSite.Examples.Css_Class_Selection" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HtmlHead" runat="server"></asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ExampleTitle" runat="server"></asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ExampleIntro" runat="server">
    <p>
        This example shows the usefulness of css selectors and deselectors. They can be used in either mode (Exact or TextBox).
    </p>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="Example" runat="server">
    <moxiecode:TinyMCE ID="TinyMCE1" runat="server" CssClassSelector="tinyMce" 
        Width="99%" InstallPath="~/js/tiny_mce/" />
    <moxiecode:TinyMCE ID="TinyMCE2" runat="server" CssClassDeselector="nonTinyMce" SkinID="advanced-simplified" Width="99%" />
    <table cellpadding="0" cellspacing="0" class="examples">
        <tr>
            <td><asp:TextBox ID="TextBox1" runat="server" CssClass="tinyMce" /></td>
            <td><asp:TextBox ID="TextBox2" runat="server" /></td>
        </tr>
        <tr>
            <td><asp:TextBox ID="TextBox3" runat="server" /></td>
            <td><asp:TextBox ID="TextBox4" runat="server" CssClass="nonTinyMce" /></td>
        </tr>
    </table>
<pre runat="server" class="html">
&lt;moxiecode:TinyMCE ID="TinyMCE1" runat="server" CssClassSelector="tinyMce" Width="99%" /&gt;
&lt;moxiecode:TinyMCE ID="TinyMCE2" runat="server" CssClassDeselector="tinyMce" SkinID="advanced-simplified" Width="99%" /&gt;
&lt;table cellpadding="0" cellspacing="0" class="examples"&gt;
    &lt;tr&gt;
        &lt;td&gt;&lt;asp:TextBox ID="TextBox1" runat="server" CssClass="tinyMce" /&gt;&lt;/td&gt;
        &lt;td&gt;&lt;asp:TextBox ID="TextBox2" runat="server" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;&lt;asp:TextBox ID="TextBox3" runat="server" /&gt;&lt;/td&gt;
        &lt;td&gt;&lt;asp:TextBox ID="TextBox4" runat="server" CssClass="nonTinyMce" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;
</pre>
</asp:Content>
<asp:Content ID="Content5" ContentPlaceHolderID="ExampleExplanation" runat="server">
    <p style="margin-bottom: 5px;">There is one primary thing to remember in this example:</p>
    <blockquote>The ordering of the TinyMCE controls affects how text boxes are extended.</blockquote>
    <p>This point can be seen in how TextBox2 is extended. TinyMCE1 is does not extend it because it does not have the class selector
    but TinyMCE2 extends it because TinyMCE2 extends all text boxes except those with a class value of <i>nonTinyMce</i>. If you were 
    to swap the two TinyMCE controls, you would find that everything would be extended
    by TinyMCE2 (the deselector TinyMCE control)</p>
    <p>The reason this is going on is due to how the control references its target. During it's PreRendering/Rendering stage the control 
    stakes it claim on TextBoxes that it matches but will not select text boxes which have already been claimed. Hence, if you have a global
    selection TinyMCE control, it should go last on the page so that your more specific instances have precedance.</p>
</asp:Content>
